<style scoped lang="less">

  @media screen and (min-width: 829px) {
    .results {
      overflow: hidden;
      width: 100%;
      min-height: 80rem;
      background-color: #F6F7FB;
      padding-bottom: 10rem;
      .resultsWrap {
        margin: 0 auto;
        width: 90%;
        overflow: hidden;
        height: 100%;
        .title {
          text-align: center;
          height: 2.21rem;
          font-size: 2.36rem;
          
          color: rgba(51, 51, 51, 1);
          line-height: 1.79rem;
          margin-top: 7.14rem;
        }

        .search {
          margin: 2.9rem auto 1.3rem;
          height: 2rem;
          position: relative;
          .searchBox {
            width: 90%;
            margin-left: 5%;
            height: 2rem;
            border-radius: 1.14rem;
            border: 2px solid #999999;
            padding-left: 15px;
            background-color: white;
          }
          .searchLogo {
            position: absolute;
            font-size: 1rem;
            right: 3rem;
            top: 0.65rem;
            cursor: pointer;
            color: rgba(153,153,153,1);
          }
        }

        .searchLi {
          height: 1.2rem;
          ul {
            width: 100%;
            li {
              float: left;
              /*padding-left: 9.14%*/
              width: 14.2%;
              text-align: center;
              font-size: 1.29rem;
              cursor: pointer;
            }
            .active {
              color: #F37D0A;
            }
          }
        }

        .listWord {
          background: rgba(248, 243, 235, 1);
          border-radius: 0.21rem;
          margin-top: 2.8rem;
          height: 3.29rem;
          li {
            float: left;
            /*color: #F6F7FB;*/
            line-height: 3.29rem;
            font-size: 1rem;
            
            color: #CFB397;
          }
          li:nth-child(1) {
            width: calc(80%-2.4rem);
            /*width: 80%;*/
            padding-left: 1.3rem;
          }
          li:nth-child(2),
          li:nth-child(3) {
            width: 10%;
            text-align: center;
            /*padding-left: 2px;*/
          }
        }
        .wpsUl {
          min-height: 51.4rem;
          background-color: white;
        }
        .listInfoWrap {
          margin-top: 1.5rem;
        }
        .listInfoWrapContent {
          /*max-height: 50rem;*/
          /*margin-top: 1.5rem;*/
          .wpsUl li {
            width: 100%;
            font-size: 0rem;
            line-height: 4.3rem;
            height: 4.3rem;
            cursor: pointer;
            border-bottom: 1px solid #EBEBEB;
          }
          .word {
            padding-left: 1.5rem;
            /*padding-top: 1.57rem;*/
            /*padding-bottom: 1.57rem;*/
            display: inline-block;
            /*width: 80%;*/
            width: calc(80%-3rem);
            height: 100%;

            img {
              display: inline-block;
              margin: 0;
              max-width: 1.29rem;
              max-height: 1.29rem;
              padding-right: 0.64rem;
              margin-bottom: 1.6rem;
            }
            span {
              width: 80%;
              display: inline-block;
              overflow: hidden;
              text-overflow:ellipsis;
              white-space: nowrap;
              font-size: 1.14rem;
              
              color: rgba(51, 51, 51, 1);
            }
          }
          .date,
          .num {
            float: right;
            display: inline-block;
            font-size: 1rem;
            
            color: rgba(153, 153, 153, 1);
            /*line-height: 0rem;*/
            text-align: center;
            width: 10%;
            /*height: 100%;*/
            span{
              display: none;
            }
          }
        }
      }
    }
  }

  @media screen and (max-width: 829px) {
    .results {
      .resultsWrap{
        height: auto;
        background-color: #f6f7fb;
      }
      /*background-color: #F6F7FB;*/
      * {
        box-sizing: border-box;
      }
      .title,
      .fill {
        display: none
      }
      .search {
        width: 100%;
        padding: 0 0.32rem;
        background-color: #fff;
        position: relative;
        float: inherit;
      }
      .searchBox {
        height: 0.72rem;
        background-color: #ECECEC;
        width: 100%;
        font-size: 0.26rem;
        padding: 0.2rem 0.3rem;
      }
      .searchLogo {
        position: absolute;
        right: 0.6rem;
        top: 0;
        line-height: 0.72rem;
        font-size: 0.4rem;
      }
      .searchLi {
        height: 1.2rem;
        float: inherit;
        background-color: #fff;
        line-height: 1.2rem;
        font-size: 0.26rem;
        color: #474747;
        width: 100%;
        li {
          width: 14%;
          text-align: center;
          float: left;
        }
        .active {
          color: #FD9D40;
          font-size: 0.3rem;
        }
      }

      .listInfoWrap {
        background-color: #fff;
        clear: both;
        margin-top: 0.2rem;
        width: 100%;
        float: inherit;
        li {
          padding: 0.4rem 0.3rem;
          border-bottom: solid 1px #ECECEC;

        }
      }
      .listInfo {
        clear: both;
        li{
          border-bottom: 1px solid #EBEBEB;
          padding: .31rem;
        }
      }
      .word {
        color: #1a1a1a;
        font-weight: bold;
        font-size: 0.3rem;
        margin-bottom: 0.1rem;
        img {
          display: inline-block;
          width: 0.28rem;
          vertical-align: top;
          margin-top: 0.07rem;
        }
        span{
          display: inline-block;
          width: 90%;
          font-size: .3rem;
        }
      }
      .date {
        margin-left: 0.35rem;
      }
      .date,
      .num {
        font-size: 0.22rem;
        color: #888;
        display: inline-block;
      }
    }

  }
  @media screen and (min-width: 1757px) and (max-width: 1920px) {
    .listWord li:nth-child(3){
      padding-left: 10px !important;
    }
  }
  @media screen and (min-width: 1516px) and (max-width: 1757px) {
    .listWord li:nth-child(3){
      padding-left: 6px !important;
    }
  }
</style>
<template>
  <div class="results">
    <div class="resultsWrap">
      <el-col :xs="24" :sm="24" :md="24" :lg="24" class="title">
        科研成果&nbsp;&nbsp;KEYANCHENGGUO
      </el-col>
      <div>
        <el-col :xs="5" :sm="5" :md="5" :lg="5" class="fill" style="height: 2rem"></el-col>
        <el-col :xs="14" :sm="14" :md="14" :lg="14" class="search">
          <input type="text" v-model="searchData" class="searchBox" placeholder="请输入想搜索的关键词" @keyup.enter="searchDoc">
          <span class="icon-search searchLogo" @click="searchDoc"></span>
        </el-col>
      </div>
      <div class="searchLi-box">
        <el-col :xs="0" :sm="6" :md="6" :lg="6" class="fill" style="height: 2rem"></el-col>
        <el-col :xs="24" :sm="12" :md="12" :lg="12" class="searchLi">
          <ul class="clear">
            <li :class="{'active':1==num}" @click="active(1)">全部</li>
            <li :class="{'active':2==num}" @click="active(2)">DOC</li>
            <li :class="{'active':3==num}" @click="active(3)">PPT</li>
            <li :class="{'active':4==num}" @click="active(4)">PDF</li>
            <li :class="{'active':5==num}" @click="active(5)">XLS</li>
            <li :class="{'active':6==num}" @click="active(6)">音频</li>
            <li :class="{'active':7==num}" @click="active(7)">其他</li>
          </ul>
        </el-col>
      </div>
      <el-col :xs="24" :sm="24" :md="24" :lg="24" class="fill">
        <el-col :xs="3" :sm="3" :md="3" :lg="3" class="listWord" style="background-color: #F6F7FB"></el-col>
        <el-col :xs="18" :sm="18" :md="18" :lg="18" class="listWord">
          <ul class="listInfo clear">
            <li>科研题目</li>
            <li>上传日期</li>
            <li>浏览量</li>
          </ul>
        </el-col>
      </el-col>
      <div class="kycg">
        <el-col :xs="0" :sm="3" :md="3" :lg="3" class="fill listInfoWrap"></el-col>
        <el-col :xs="24" :sm="18" :md="18" :lg="18" class="listInfoWrapContent">
          <ul class="listInfo clear wpsUl">
            <li @click="goActive(item)" v-for="(item,index) in resultsData">
              <div class="word">
                <img :src="item.extendInfo">
                <span>{{item.title}}</span>
              </div>
              <p class="num"><span>浏览：</span>{{item.categoryCode}}</p>
              <p class="date">{{$bw.format(item.postTime,'date')}}</p>
            </li>
          </ul>
        </el-col>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        num: 1,
        type: '',
        searchData: '',
        resultsData: [],
        requestData: {
          "Filter": [{
            "GroupName": "1",
            "FieldName": "PlatformType",
            "FieldValue": 0,
            "SqlOperator": 3,
            "IsQuery": true
          },
            {
              "GroupName": "2",
              "FieldName": "categoryType",
              "FieldValue": "Special",
              "SqlOperator": 3,
              "IsQuery": true
            }
          ]
        }
      }
    },
    components: {

    },
    methods: {
      active(index) {
        this.num = index
        if (index == 1) {
          this.removeOtherFliter();
          var resultIndex = this.sumSerachData("tags");
          if (resultIndex >= 0) {
            this.requestData.Filter.splice(resultIndex, 1);
          }
          this.getResultsList();
        }
        if (index == 2) {
          this.removeOtherFliter();
          var resultIndex = this.sumSerachData("tags");
          if (resultIndex >= 0) {
            this.requestData.Filter[resultIndex].FieldValue = 'doc';
          } else {
            this.requestData.Filter.push({
              "GroupName": "state",
              "FieldName": "tags",
              "FieldValue": "doc",
              "SqlOperator": 0,
              "IsQuery": true
            })
          }
          this.getResultsList();
        }
        if (index == 3) {
          this.removeOtherFliter();
          var resultIndex = this.sumSerachData("tags");
          if (resultIndex >= 0) {
            this.requestData.Filter[resultIndex].FieldValue = "ppt";
          } else {
            this.requestData.Filter.push({
              "GroupName": "state",
              "FieldName": "tags",
              "FieldValue": "ppt",
              "SqlOperator": 0,
              "IsQuery": true
            })
          }
          this.getResultsList();
        }
        if (index == 4) {
          this.removeOtherFliter();
          var resultIndex = this.sumSerachData("tags");
          if (resultIndex >= 0) {
            this.requestData.Filter[resultIndex].FieldValue = "pdf";
          } else {
            this.requestData.Filter.push({
              "GroupName": "state",
              "FieldName": "tags",
              "FieldValue": "pdf",
              "SqlOperator": 0,
              "IsQuery": true
            })
          }
          this.getResultsList();
        }
        if (index == 5) {
          this.removeOtherFliter();
          var resultIndex = this.sumSerachData("tags");
          if (resultIndex >= 0) {
            this.requestData.Filter[resultIndex].FieldValue = "xlsx";
          } else {
            this.requestData.Filter.push({
              "GroupName": "state",
              "FieldName": "tags",
              "FieldValue": "xlsx",
              "SqlOperator": 0,
              "IsQuery": true
            })
          }
          this.getResultsList();
        }
        if (index == 6) {
          this.removeOtherFliter();
          var resultIndex = this.sumSerachData("tags");
          if (resultIndex >= 0) {
            this.requestData.Filter[resultIndex].FieldValue = "mp3";
          } else {
            this.requestData.Filter.push({
              "GroupName": "state",
              "FieldName": "tags",
              "FieldValue": "mp3",
              "SqlOperator": 0,
              "IsQuery": true
            })
          }
          this.getResultsList()
        }
        if (index == 7) {

          var filterData = {
            "Filter": [{
              "GroupName": "1",
              "FieldName": "PlatformType",
              "FieldValue": 0,
              "SqlOperator": 3,
              "IsQuery": true
            },
              {
                "GroupName": "2",
                "FieldName": "categoryType",
                "FieldValue": "Special",
                "SqlOperator": 3,
                "IsQuery": true
              }
            ]
          }
          filterData.Filter.push({
            "GroupName": "except",
            "FieldName": "tags",
            "FieldValue": "mp3",
            "SqlOperator": 1,
            "IsQuery": true
          })
          filterData.Filter.push({
            "GroupName": "except1",
            "FieldName": "tags",
            "FieldValue": "xlsx",
            "SqlOperator": 1,
            "IsQuery": true
          })
          filterData.Filter.push({
            "GroupName": "except2",
            "FieldName": "tags",
            "FieldValue": "ppt",
            "SqlOperator": 1,
            "IsQuery": true
          })
          filterData.Filter.push({
            "GroupName": "except3",
            "FieldName": "tags",
            "FieldValue": "doc",
            "SqlOperator": 1,
            "IsQuery": true
          })
          filterData.Filter.push({
            "GroupName": "except4",
            "FieldName": "tags",
            "FieldValue": "pdf",
            "SqlOperator": 1,
            "IsQuery": true
          })
          this.requestData = filterData;
          this.getResultsList();
        }
      },
      goActive(item) {
        this.$router.push({ path: '/ideaResultsInfo', query: { contentId: item.contentId } })
      },
      getResultsList() {
        this.$service('/api/CMSMain/GetContentLists', 'post', this.requestData).then((response) => {
          this.resultsData = response.Data
        })
          .catch(err => {
            //          this.fullscreenLoading=false;
          })
      },
      sumSerachData(name) {
        for (var i = 0; i < this.requestData.Filter.length; i++) {
          var item = this.requestData.Filter[i];
          if (item.FieldName == name) {
            return i
          }
          if (item.FielName == 'CCatg') {
            this.requestData.Filter.splice(i, 1);
          }
        }
        return -1;
      },
      removeOtherFliter() {
        var except = ['except', 'except1', 'except2', 'except3', 'except4'];

        for (var k = 0; k < except.length; k++) {
          var name = except[k];
          for (var i = 0; i < this.requestData.Filter.length; i++) {
            var item = this.requestData.Filter[i];
            if (item.GroupName == name) {
              this.requestData.Filter.splice(i, 1);
            }
          }
        }

      },
      searchDoc() {
        var resultIndex = this.sumSerachData("title");
        if (this.searchData.length < 1) {
          if (resultIndex > 0) {
            this.requestData.Filter.splice(resultIndex, 1);
            return;
          }
        } else {
          if (resultIndex >= 0) {
            this.requestData.Filter[resultIndex].FieldValue = this.searchData;
          } else {
            this.requestData.Filter.push({
              "GroupName": "xx",
              "FieldName": "title",
              "FieldValue": this.searchData,
              "SqlOperator": 0,
              "IsQuery": true
            })
          }
        }
        this.getResultsList();
      }
    },

    mounted() {
      this.type = this.$route.query.type;
      this.getResultsList();
    },
  }

</script>
